;
//小火箭
$(function () {
    var pagH = 900;
    $("body").on("scroll", function () {
        var mH = $(this).scrollTop();
        if (mH >= pagH) {
            $(".con11").css({
                display: "block",
            });
        } else {
            $(".con11").css({
                display: "none",
            });
        }
    })
    $(".con11").on("mouseenter", function () {
        $(".rocket").css({
            "background": "url(../images/rocket2.png)no-repeat",
        })
    }).on("mouseleave", function () {
        $(".rocket").css({
            "background": "url(../images/rocket.png)no-repeat",
        })
    }).on("click", function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500, function () {})
    })

})

// 切换
$(function () {
    $(".green").on("click", function () {
        $(this).parent().css("border", "1px solid red");
        $(this).parent().siblings().css("border", "1px solid #f3f3f3")
        $("#middleImg").children("img").attr("src", "../images/biao1-midlv.jpg");
        $("#bigArea").children("img").attr("src", "../images/biao1lv.jpg");
        $("#small>ul>li").eq(0).children("img").attr("src", "../images/biao1-smalllv.jpg");
        $("#small>ul>li").eq(0).on("click", function () {
            $("#middleImg").children("img").attr("src", "../images/biao1-midlv.jpg");
            $("#bigArea").children("img").attr("src", "../images/biao1lv.jpg");
        })

    });


    $(".black").on("click", function () {
        $(this).parent().css("border", "1px solid red");
        $(this).parent().siblings().css("border", "1px solid #f3f3f3")
        $("#middleImg").children("img").attr("src", "../images/biao1-mid.jpg");
        $("#bigArea").children("img").attr("src", "../images/biao1.jpg");
        $("#small>ul>li").eq(0).children("img").attr("src", "../images/biao1-small.jpg");
        $("#small>ul>li").eq(0).on("click", function () {
            $("#middleImg").children("img").attr("src", "../images/biao1-mid.jpg");
            $("#bigArea").children("img").attr("src", "../images/biao1.jpg");
        })
    })


    // $(".green").on("click",function(){
    //     $(this).parent().css("border","1px solid red")
    //     $(this).parent("a").sibiling().children(".black").css("border","1px solid #f3f3f3")
    // })


})



//飞入购物车
$(function () {
    var mH;
    $("html").on("scroll","body", function () {
        mH = $(this).scrollTop();
    })

    $("body").on("click",".bought", function () {
        let $cloneImg = $("#middleImg").children("img").clone(true);
        $($cloneImg).css({
            position: "absolute",
            left: "0px",
            top: "0px",
            zIndex: 999,
        })
        $("#middleImg").append($cloneImg);
        let targetObj = $(".con12box").offset();

        targetObj.top = targetObj.top + mH;
        targetObj.height = 0;
        targetObj.width = 0;

        $($cloneImg).animate(targetObj, 1000, function () {
            $(this).remove();
        });

    })
})





//加减

$(function () {
    $("body").on("click",".morea", function () {
        var n = $(this).prev().val();
        var num = parseInt(n) + 1;
        if (num == 0) {
            return;
        }
        $(this).prev().val(num);
    });
    $("body").on("click",".lessa",function () {
        var n = $(this).next().val();
        var num = parseInt(n) - 1;
        if (num == 0) {
            return
        }
        $(this).next().val(num);
    });
})



//延迟加载
$(function () {
    $(".con3r-tu img").lazyload({
        placeholder: "../images/timg.gif",
        effect: "fadeIn",
        threshold: 100,
        container: $("#ppoo")
    })
})


$(function () {
    var globalData=null;
    function load() {
        if (window.location.search.indexOf("?") == -1 ||
            window.location.search.indexOf("=") == -1) {
            return;
        }
        // console.log(strParams)
        $.get("http://127.0.0.1:8080/api/goods" + window.location.search, function (data) {
            console.log(data[0])
            globalData=data[0];
            var strHtml = `
            <div class="con2l">
                <div class="con2lT">
                    <div class="con2txt">
                        <a href="#">首页</a>&nbsp;&nbsp;
                        /&nbsp;&nbsp;
                        <a href="#">领券直播</a>&nbsp;&nbsp;
                        /&nbsp;&nbsp;
                        <span>商品详情</span>
                    </div>
                    <div id="box">
                        <div id="middleImg">
                            <img src="http://127.0.0.1:8080${data[0].imgs}" />
                            <div id="middleArea"></div>
                        </div>
                        <div id="small">
                            <ul>
                                <li><img src="http://127.0.0.1:8080${data[0].s_imgs[0]}" /></li>
                                <li><img src="http://127.0.0.1:8080${data[0].s_imgs[1]}" /></li>
                                <li><img src="http://127.0.0.1:8080${data[0].s_imgs[2]}" /></li>
                                <li><img src="http://127.0.0.1:8080${data[0].s_imgs[3]}" /></li>
                                <li><img src="http://127.0.0.1:8080${data[0].s_imgs[4]}" /></li>
                            </ul>
                        </div>
                        <div id="bigArea">
                            <img id="bigImg" src="http://127.0.0.1:8080${data[0].b_imgs[0]}" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="con2c">
                <p class="c2cp1">
                    <a href="#">
                        <span></span><span>${data[0].pName}</span>
                    </a>
                </p>
                <br />
                <p class="c2cp2">
                    瑞士时尚潮流品牌Romago推出海神手表系列, 灵感来自儿时hide-and-seek游戏, 时间会从手表上隐藏起来, 只要轻按表旁的LED按扭,
                    玻璃镜面便会马上消失, 夜光时计表面显示紧接曝光, 数秒后又自动消失。独特的夜灯功能, 充份地表现出这一分与众不同, 绝对是今季夜行活动的潮流示范。
                </p>
                <div class="show-price">
                    <span class="now-price"><b>(独享)</b>折扣价&nbsp;&nbsp;<b>&yen;<i>${data[0].pPrice}</i></b></span>
                    <span class="old-price">在售价&nbsp;&nbsp;&yen;<i>9900</i></span>
                </div>
                <div class="goods-data">
                    <div class="goods-color">
                       
                        
                    </div>
                    <div class="goods-num">
                        <span>数量</span>
                        <div class="num">
                            <a class="lessa" href="#"></a>
                            <input id="numBuy" type="text" value="1">
                            <a class="morea" href="#"></a>
                        </div>
                    </div>
                    <div class="goods-buy">
                        <a href="#">立即购买</a>
                        <a class="bought" href="#">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="con2r">
                <p>
                    <span>大家都在抢</span>
                </p>
                <div class="con2r-box">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="../images/k1.jpg" alt="">
                                <span>券后：&yen;5.10</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/k2.jpg" alt="">
                                <span>券后：&yen;2.10</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/k3.jpg" alt="">
                                <span>券后：&yen;1.80</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/k4.jpg" alt="">
                                <span>券后：&yen;29.50</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/k5.jpg" alt="">
                                <span>券后：&yen;2.60</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../images/k6.jpg" alt="">
                                <span>券后：&yen;8.60</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="con2r-bb">
                    <a class="left" href="#"></a>
                    <a class="right" href="#"></a>
                </div>
            </div>
        `
            $(".con2").append(strHtml);

            $("#middleArea").height(($("#middleImg").height() / $("#bigImg").height()) * $("#bigArea").height());
            $("#middleArea").width(($("#middleImg").width() / $("#bigImg").width()) * $("#bigArea").width());
            var scale = $("#bigArea").height() / $("#middleArea").height();

            $("body").on("mouseenter", "#middleImg", function (e) {
                $("#middleArea").show();
                $("#bigArea").show();
                $("body").on("mousemove", "#middleImg", function (e) {
                    var mX = e.pageX - $(this).offset().left - $('#middleArea').width() / 2;
                    var mY = e.pageY - $(this).offset().top - $('#middleArea').height() / 2;

                    if (mX <= 0) {
                        mX = 0
                    }
                    if (mY <= 0) {
                        mY = 0;
                    }
                    if (mX >= ($("#middleImg").width() - $("#middleArea").width())) {
                        mX = ($("#middleImg").width() - $("#middleArea").width())
                    }
                    if (mY >= ($("#middleImg").height() - $("#middleArea").height())) {
                        mY = ($("#middleImg").height() - $("#middleArea").height())
                    }

                    $("#middleArea").css({
                        left: mX,
                        top: mY
                    })

                    $('#bigImg').css({
                        left: -mX * scale,
                        top: -mY * scale
                    })
                })
            }).on("mouseleave", "#middleImg", function () {
                $("#middleArea").hide();
                $("#bigArea").hide();
            })


            $("body").on("click", "#small li", function () {
                console.log($(this).index())
                var index = $(this).index();
                $("#middleImg img").attr("src", `http://127.0.0.1:8080${data[0].m_imgs[index]}`);
                $("#bigImg").attr("src", `http://127.0.0.1:8080${data[0].b_imgs[index]}`);
            })
        })
    }
    load();

    $("body").on("click",".bought", function (){
        //数据进入购物车 
        var saveObj={
            uId:JSON.parse($.cookie("yolence")).uid,
            pId:globalData.pid,
            pName:globalData.pName,
            pPrice:globalData.pPrice,
            pNum:$("#numBuy").val(),
            pTotal:globalData.pPrice*$("#numBuy").val(),
            pImg:globalData.s_imgs[0]

        }
        console.log(saveObj);
        $.ajax({
            url:"http://127.0.0.1:8080/api/addCart",
            type:"post",
            dataType:"json",
            data:saveObj
        }).then((data)=>{
            console.log(data)
        })




    })








})


